<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const studentList = ref([])
const name = ref('')
const student_num = ref('')

// 查询全部
const searchAll = () => {
  axios.get('http://127.0.0.1:8080/students/list').then(res => {
    studentList.value = res.data.data
  })
}

// 条件查询
const search = () => {
  axios.get('http://127.0.0.1:8080/students', {
    params: {
      name: name.value,
      studentNum: student_num.value
    }
  }).then(res => {
    studentList.value = res.data.data
  })
}

// 删除学生
const deleteStudent = (id) => {
  axios.delete(`http://127.0.0.1:8080/students/${id}`).then(() => {
    ElMessage.success('删除成功')
    searchAll()
  })
}

// 详情弹窗
const showDialog = ref(false)
const detailStudent = ref({})
const showDetail = (student) => {
  detailStudent.value = student
  showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
}

// 新增弹窗
const showAddDialog = ref(false)
const newStudent = ref({
  studentNum: '',
  name: '',
  phone: '',
  email: ''
})
const addStudent = () => {
  showAddDialog.value = true
}
const closeAddDialog = () => {
  showAddDialog.value = false
  newStudent.value = {
    studentNum: '',
    name: '',
    phone: '',
    email: ''
  }
}
const submitAddStudent = () => {
  axios.post('http://127.0.0.1:8080/students', newStudent.value).then(() => {
    ElMessage.success('新增成功')
    closeAddDialog()
    searchAll()
  })
}

const updateStudent = () => {
  axios.put('http://127.0.0.1:8080/students', detailStudent.value).then(() => {
    ElMessage.success('修改成功')
    closeDialog()
    searchAll()
  })
}

onMounted(() => {
  searchAll()
})
</script>

<template>
  <el-card class="box-card" style="width: 60%; margin: 30px auto;">
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>学生信息管理</span>
        <el-button type="primary" size="small" @click="addStudent">新增学生</el-button>
      </div>
    </template>
    <div style="margin-bottom: 20px; display: flex; gap: 10px;">
      <el-input v-model="name" placeholder="姓名" clearable style="width: 180px;" />
      <el-input v-model="student_num" placeholder="学号" clearable style="width: 180px;" />
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="searchAll">重置</el-button>
    </div>
    <el-table :data="studentList" style="width: 100%;" border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="studentNum" label="学号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机号码" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column
        prop="createTime"
        label="生成时间"
        :formatter="(row) => dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        :formatter="(row) => dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss')"
      />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button size="small" @click="showDetail(scope.row)">详情</el-button>
          <el-button size="small" type="danger" @click="deleteStudent(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 详情弹窗 -->
<el-dialog v-model="showDialog" title="学生详情" width="400px" :close-on-click-modal="false">
  <el-form :model="detailStudent" label-width="80px">
    <el-form-item label="学号">
      <el-input v-model="detailStudent.studentNum" />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="detailStudent.name" />
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input v-model="detailStudent.phone" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="detailStudent.email" />
    </el-form-item>
    <el-form-item label="生成时间">
      <el-input :value="dayjs(detailStudent.createTime).format('YYYY-MM-DD HH:mm:ss')" disabled />
    </el-form-item>
    <el-form-item label="更新时间">
      <el-input :value="dayjs(detailStudent.updateTime).format('YYYY-MM-DD HH:mm:ss')" disabled />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="closeDialog">关闭</el-button>
    <el-button type="primary" @click="updateStudent">修改</el-button>
  </template>
  </el-dialog>

  <!-- 新增学生弹窗 -->
  <el-dialog v-model="showAddDialog" title="新增学生" width="400px" :close-on-click-modal="false">
    <el-form :model="newStudent" label-width="80px">
      <el-form-item label="学号">
        <el-input v-model="newStudent.studentNum" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="newStudent.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="newStudent.phone" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="newStudent.email" placeholder="请输入邮箱" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeAddDialog">取消</el-button>
      <el-button type="primary" @click="submitAddStudent">提交</el-button>
    </template>
  </el-dialog>

</template>